<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>Vue Router History 模式渲染配置 | Li Yi</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.74.1" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/dist/css/app.4fc0b62e4b82c997bb0041217cd6b979.css" rel="stylesheet">
    

    

    
      

    

    
    
    <meta property="og:title" content="Vue Router History 模式渲染配置" />
<meta property="og:description" content="源于最近自己开发vue项目，项目使用Vue-router, 在配置 HTML5 History 模式下遇到一些问题，写篇文章简单总结一下" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/posts/vue/2019-08-04-vue-history-mode/" />
<meta property="article:published_time" content="2018-08-04T00:00:00+00:00" />
<meta property="article:modified_time" content="2018-08-04T00:00:00+00:00" />
<meta itemprop="name" content="Vue Router History 模式渲染配置">
<meta itemprop="description" content="源于最近自己开发vue项目，项目使用Vue-router, 在配置 HTML5 History 模式下遇到一些问题，写篇文章简单总结一下">
<meta itemprop="datePublished" content="2018-08-04T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2018-08-04T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="252">



<meta itemprop="keywords" content="vue,vue-router," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Vue Router History 模式渲染配置"/>
<meta name="twitter:description" content="源于最近自己开发vue项目，项目使用Vue-router, 在配置 HTML5 History 模式下遇到一些问题，写篇文章简单总结一下"/>

	
  </head>

  <body class="ma0 avenir bg-near-white">

    
   
  

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        Li Yi
      
    </a>
    <div class="flex-l items-center">
      

      
      















    </div>
  </div>
</nav>

    </div>
  </header>



    <main class="pb7" role="main">
      
  
  <article class="flex-l flex-wrap justify-between mw8 center ph3">
    <header class="mt4 w-100">
      <aside class="instapaper_ignoref b helvetica tracked">
          
        POSTS
      </aside>
      




  <div id="sharing" class="mt3">

    
    <a href="https://www.facebook.com/sharer.php?u=/posts/vue/2019-08-04-vue-history-mode/" class="facebook no-underline" aria-label="share on Facebook">
      <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M28.765,50.32h6.744V33.998h4.499l0.596-5.624h-5.095  l0.007-2.816c0-1.466,0.14-2.253,2.244-2.253h2.812V17.68h-4.5c-5.405,0-7.307,2.729-7.307,7.317v3.377h-3.369v5.625h3.369V50.32z   M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;"/></svg>

    </a>

    
    
    <a href="https://twitter.com/share?url=/posts/vue/2019-08-04-vue-history-mode/&amp;text=Vue%20Router%20History%20%e6%a8%a1%e5%bc%8f%e6%b8%b2%e6%9f%93%e9%85%8d%e7%bd%ae" class="twitter no-underline" aria-label="share on Twitter">
      <svg height="32px"  style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M37.167,22.283c-2.619,0.953-4.274,3.411-4.086,6.101  l0.063,1.038l-1.048-0.127c-3.813-0.487-7.145-2.139-9.974-4.915l-1.383-1.377l-0.356,1.017c-0.754,2.267-0.272,4.661,1.299,6.271  c0.838,0.89,0.649,1.017-0.796,0.487c-0.503-0.169-0.943-0.296-0.985-0.233c-0.146,0.149,0.356,2.076,0.754,2.839  c0.545,1.06,1.655,2.097,2.871,2.712l1.027,0.487l-1.215,0.021c-1.173,0-1.215,0.021-1.089,0.467  c0.419,1.377,2.074,2.839,3.918,3.475l1.299,0.444l-1.131,0.678c-1.676,0.976-3.646,1.526-5.616,1.568  C19.775,43.256,19,43.341,19,43.405c0,0.211,2.557,1.397,4.044,1.864c4.463,1.377,9.765,0.783,13.746-1.568  c2.829-1.673,5.657-5,6.978-8.221c0.713-1.716,1.425-4.851,1.425-6.354c0-0.975,0.063-1.102,1.236-2.267  c0.692-0.678,1.341-1.419,1.467-1.631c0.21-0.403,0.188-0.403-0.88-0.043c-1.781,0.636-2.033,0.551-1.152-0.402  c0.649-0.678,1.425-1.907,1.425-2.267c0-0.063-0.314,0.042-0.671,0.233c-0.377,0.212-1.215,0.53-1.844,0.72l-1.131,0.361l-1.027-0.7  c-0.566-0.381-1.361-0.805-1.781-0.932C39.766,21.902,38.131,21.944,37.167,22.283z M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4  s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/></svg>

    </a>

    
    <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=/posts/vue/2019-08-04-vue-history-mode/&amp;title=Vue%20Router%20History%20%e6%a8%a1%e5%bc%8f%e6%b8%b2%e6%9f%93%e9%85%8d%e7%bd%ae" class="linkedin no-underline" aria-label="share on LinkedIn">
      <svg  height="32px"  style="enable-background:new 0 0 65 65;" version="1.1" viewBox="0 0 65 65" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M50.837,48.137V36.425c0-6.275-3.35-9.195-7.816-9.195  c-3.604,0-5.219,1.983-6.119,3.374V27.71h-6.79c0.09,1.917,0,20.427,0,20.427h6.79V36.729c0-0.609,0.044-1.219,0.224-1.655  c0.49-1.22,1.607-2.483,3.482-2.483c2.458,0,3.44,1.873,3.44,4.618v10.929H50.837z M22.959,24.922c2.367,0,3.842-1.57,3.842-3.531  c-0.044-2.003-1.475-3.528-3.797-3.528s-3.841,1.524-3.841,3.528c0,1.961,1.474,3.531,3.753,3.531H22.959z M34,64  C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z M26.354,48.137V27.71h-6.789v20.427  H26.354z" style="fill-rule:evenodd;clip-rule:evenodd;fill:;"/>
</svg>

    </a>
  </div>


      <h1 class="f1 athelas mt3 mb1">Vue Router History 模式渲染配置</h1>
      
      <p class="tracked">
          By <strong>
          
              liyi
          
          </strong>
      </p>
      
      
      <time class="f6 mv4 dib tracked" datetime="2018-08-04T00:00:00Z">August 4, 2018</time>

      
      
    </header>
    <div class="nested-copy-line-height lh-copy serif f4 nested-links nested-img mid-gray pr4-l w-two-thirds-l"><blockquote>
<p>前言：写这篇文章，源于最近自己开发vue项目，项目使用Vue-router, 在配置 HTML5 History 模式下遇到一些问题，写篇文章简单总结一下</p>
</blockquote>
<h2 id="vue-history-页面渲染空白前端配置">Vue history 页面渲染空白前端配置:</h2>
<p>1、修改vue-cli config/index.js 配置文件 找到如下文件</p>
<p>静态文件修改为相对路径 ： <code>assetsPublicPath: '/'</code> 修改为 <code>assetsPublicPath: './'</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">build</span><span style="color:#f92672">:</span> {
       <span style="color:#75715e">// Template for index.html
</span><span style="color:#75715e"></span>       <span style="color:#a6e22e">index</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">path</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#a6e22e">__dirname</span>, <span style="color:#e6db74">&#39;../dist/index.html&#39;</span>),

       <span style="color:#75715e">// Paths
</span><span style="color:#75715e"></span>       <span style="color:#a6e22e">assetsRoot</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">path</span>.<span style="color:#a6e22e">resolve</span>(<span style="color:#a6e22e">__dirname</span>, <span style="color:#e6db74">&#39;../dist&#39;</span>),
       <span style="color:#a6e22e">assetsSubDirectory</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;static&#39;</span>,
       <span style="color:#75715e">//assetsPublicPath: &#39;/&#39;,
</span><span style="color:#75715e"></span>       <span style="color:#a6e22e">assetsPublicPath</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;./&#39;</span>,

       ...
}
</code></pre></div><p>2、修改路由base值</p>
<pre><code class="language-code" data-lang="code">const router = new VueRouter({
    mode: 'history',
    #base: '/',
    base: '/build/',
    ...
})
</code></pre><p>上述代码片段： base 默认 &ldquo;/&rdquo; 为服务器根目录,  假如开发项目Vue Span 服务器根目录在  <code>public/</code>, 生产文件在 &lsquo;/public/build/&rsquo; 下面,
此时应该设置为 <code>base: '/build/' </code></p>
<p><strong>注意：如果Web server 根目录不在dist下(或者其他目录下面), base：vaule 需要修改为基于服务器根目录下  <code>/xxx/</code> 来指定 vue Spa入口文件</strong></p>
<h2 id="vue-router-服务端配置-案例">Vue Router 服务端配置 案例:</h2>
<h4 id="nginx配置分为两种情况">Nginx配置分为两种情况:</h4>
<p>1、发布文件在服务器根目录如下所示：</p>
<pre><code class="language-code" data-lang="code">location / {
    root  /；
    index index.html;
    try_files $uri $uri/ /index.html;
}
.....
</code></pre><p>2、发布文件在不在服务器根目录，举个例子，比如服务器根目录在 <code>/public/</code> ,项目发布文件在 build 目录下</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html"># 服务器目录结构

├── public/ # 服务器根目录
|   |
|   └── build/ # 生产环境发布文件目录
└── ****/


# Nginx server config:

root /www/public/;

location /build/ {
    index index.html index.htm;

    try_files $uri $uri/ /build/index.html;
}
</code></pre></div><h4 id="apache">Apache:</h4>
<p>Apache服务器配置 Vue Router History模式，需要在生产文件目录(和vue index.html发布入口文件在同一个目录) 新建一个 <code>.htaccess</code> 文件，配置如下图,</p>
<h5 id="1首先需要配置apache-httpdconf">1、首先需要配置Apache httpd.conf</h5>
<ul>
<li>开启rewrite_module功能， <code>LoadModule rewrite_module libexec/apache2/mod_rewrite.so</code> 去掉注释</li>
<li><code>AllowOverride: All</code>是为了使apache支持 <code>.hatccess</code>,</li>
</ul>
<pre><code class="language-code" data-lang="code">DocumentRoot &quot;/www/public/&quot;（设置apache默认指向目录）
&lt;Directory &quot;/www/public/&quot;&gt;
    Options Indexes FollowSymLinks Multiviews
    MultiviewsMatch Any
    AllowOverride All
    Require all granted
&lt;/Directory&gt;
</code></pre><h5 id="2hatccess-配置文件">2、<strong>.hatccess 配置文件</strong></h5>
<pre><code class="language-code" data-lang="code"> &lt;IfModule mod_rewrite.c&gt;
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
&lt;/IfModule&gt;
</code></pre><p>配置参数:
<code>RewriteBase</code>：默认在 &ldquo;/&rdquo; 根目录查找
<code>RewriteRule ^index\.html$ - [L]</code>: 匹配 index.html 文件</p>
<h4 id="注意">注意：</h4>
<p>如果生产文件不在根目录, 而是在 &lsquo;/public/build/index.html&rsquo; 那么:
<code>RewriteBase: /</code> 修改为为 <code>RewriteBase: /build/</code>
<code>RewriteRule . /index.html [L]</code> 修改为： <code>RewriteRule . /build/index.html [L]</code> 如下所示</p>
<pre><code class="language-code" data-lang="code"> &lt;IfModule mod_rewrite.c&gt;
  RewriteEngine On
  RewriteBase /build/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /build/index.html [L]
&lt;/IfModule&gt;
</code></pre><h4 id="备注">备注：</h4>
<p>以上举例服务器根目录都是基于 <code>/public</code> 演示, 开发中依据实际情况替换对应目录即可</p>
<h3 id="参考资料">参考资料：</h3>
<p><a href="https://router.vuejs.org/zh/guide/essentials/history-mode.html">Vue-Router官方文档</a></p>
<ul class="pa0">
  
   <li class="list">
     <a href="/tags/vue" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">vue</a>
   </li>
  
   <li class="list">
     <a href="/tags/vue-router" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">vue-router</a>
   </li>
  
</ul>
<div class="mt6 instapaper_ignoref">
      
      
      </div>
    </div>

    <aside class="w-30-l mt6-l">




</aside>

  </article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="" >
    &copy;  Li Yi 2020 
  </a>
    <div>














</div>
  </div>
</footer>

    

  <script src="/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
